<template>
	<view>
		<view class="load" v-if="!loading">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<view class="wrap" v-else>
			<view class="navBox" id="navBox" :style="isNav ? 'background: #FFFFFF;' : ''">
				<topStatus></topStatus>
				<view class="nav_main">
						<uni-icons type="left" color="#343434" size="30" @click="goBack()"></uni-icons>
						<view class="nav_tit">
							设置{{mold==0 ? '我的家乡' : '地区'}}
						</view>
						<uni-icons type="left" color="#333" size="30" style="opacity: 0;"></uni-icons>
				</view>
			</view>
			<view :style="{height:navHeight+'px'}"></view>
			
			<view class="food_body">
				<view class="province">
					<view class="province_cell" :class="chooseProvince.index==index || chooseProvince.value==item ?'province_active':''" v-for="(item,index) in ProvinceList" :key="index" @click="checkProvince(item,index)">
						{{item}}
					</view>
				</view>
				
				<view class="food_main" :style="{height:mainHeight+'px'}">
					<view class="county">
						<view class="county_cell" :class="chooseCity.index==i || chooseCity.value==el ?'county_active':''" v-for="(el,i) in CityList" :key="i" @click="checkCity(el,i)">
							{{el}}
						</view>
					</view>
					
					
					<view class="food_entry">
						<block v-for="(item,index) in FoodList" :key="index">
							<view class="entry_cell" :class="chooseFood.index==index || chooseFood.value==item ?'entry_active':''" @click="checkFood(item,index)">
								{{item}}
							</view>
						</block>
						
						<!-- <view class="tips">
							<view class="tips_text">
								如果您还有更好的家乡特产
							</view>
							<view class="tips_text" @click="isAdd=true">
								请<text>点击这里</text>告知
							</view>
						</view> -->
						
						<!-- <block v-if="mySubFood.length">
							<view class="me_tit">
								我添加的
							</view>
							<view class="entry_cell" v-for="(item,index) in mySubFood" :key="index">
								{{item.FoodName}}
								<view class="entry_popup" :class="foodStatus(item.Status).class">
									{{foodStatus(item.Status).tit}}
								</view>
							</view>
						</block> -->
						
						<view class="food_submit" @click="SetHometown()">
							确定
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="add_popup" v-show="isAdd">
				<view class="add_box">
					<view class="add_tit">
						添加特产
					</view>
					<input type="text" v-model="FoodName" placeholder="请输入特产名称"/>
					<view class="input_tips">
						确认提交后，平台审核通过将获得奖励！
					</view>
					
					<view class="add_btnbox">
						<view class="btn_add btn_cancle" @click="closeAdd()">
							取消
						</view>
						<view class="btn_add btn_sure" @click="subAddFood()">
							确定
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import cityUtil from '@/pages/store/city.js';
const { safeArea, windowHeight } = uni.getSystemInfoSync()
	export default {
		data() {
			return {
				loading:false,
				isNav: false,
				navHeight:90,
				mainHeight:'',
				isAdd:false,
				FoodName:'',
				
				ProvinceList:[],
				chooseProvince:{
					value:'',
					index:null
				},
				
				CityList:[],
				chooseCity:{
					value:'',
					index:null
				},
				
				FoodList:[],
				chooseFood:{
					value:'',
					index:null,
				},
				
				mySubFood:[],
				mold:0
			};
		},
		onPageScroll(e) {
			// console.log(e.scrollTop);
			this.isNav = e.scrollTop > 100 ? true : false
		},
		// watch:{
		// 	'loading':{
		// 		handler(val){
		// 			console.log('监听值》》》》》》》》',val);
		// 			this.$nextTick( () => {
		// 				setTimeout(async()=>{
		// 					const height = await this.getHeight('#navBox') //计算的元素高度
		// 					console.log('=》》》》》》》》》》》》》》》》》》》》》》height',height);
		// 					this.navHeight = height //剩余屏幕高度
		// 				},300)
						
		// 			})
		// 		},
		// 		immediate:true
		// 	}
		// },
		onLoad(e) {
			this.mold = e.mold || 0
			this.init()
		},
		// onReady() {
		// 	this.Height()
		// },
		methods:{
			foodStatus(status){
				if(status==0){
					return {
						tit:'待审核',
						class:'warn_popup'
					}
				}
				if(status==1){
					return {
						tit:'已通过',
						class:''
					}
				}
				if(status==-1){
					return {
						tit:'已拒绝',
						class:'error_popup'
					}
				}
			},
			Height(){
				this.$nextTick( () => {
					setTimeout(async()=>{
						const height = await this.getHeight('#navBox') //计算的元素高度
						console.log('=》》》》》》》》》》》》》》》》》》》》》》height',height);
						this.navHeight = height 
						this.mainHeight = windowHeight - height - 55 //剩余屏幕高度
					},300)
				})
			},
			getHeight(id) {
				return new Promise(resolve => {
					let query = uni.createSelectorQuery().in(this);
					query.select(id).boundingClientRect();
					query.exec((res) => {
							resolve(res[0].height)
					})
				})
			},
			goBack() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
						// 如果页面栈长度大于1，则说明有上一页，可以返回
						uni.navigateBack();
				} else {
						// 如果没有上一页，则导航到首页
						uni.reLaunch({
								url: '/pages/tab/home'
						});
				}
			},
			async init(){
		
				this.checkAddressFun()
				if(this.mold==0){
					this.GetMyHometown()
				}
				if(this.mold==1){
					this.GetUserInfo()
				}
				this.loading = true
				this.Height()
			},
			async GetUserInfo(){
				let u = uni.getStorageSync('user');
				let res = await this.$api.post('User/GetUserInfo', {
					ID: u.UserID
				});
				
				if(res.code==0){
					if(res.data){
						
						
						this.chooseProvince.value = res.data.Province
						this.chooseCity.value = res.data.City 
						this.chooseFood.value = res.data.Area
						
						if(!res.data.Province || !res.data.City){
							this.chooseProvince = {
								value:this.ProvinceList[0],
								index:0
							}
							this.chooseCity = {
								value:this.CityList[0],
								index:0
							}
							return
						}
						
						let ProvinceIndex = this.ProvinceList.findIndex(item=>item==res.data.Province)
						this.chooseProvince = {
							value:this.ProvinceList[ProvinceIndex],
							index:ProvinceIndex
						}
						
						this.CityList = cityUtil.CityList(this.chooseProvince.index)
						let CityIndex = this.CityList.findIndex(item=>item==res.data.City)
						this.chooseCity = {
							value:this.CityList[CityIndex],
							index:CityIndex
						}
						
						this.FoodList = cityUtil.AreaList(this.chooseProvince.index,this.chooseCity.index)
					}else{
						this.chooseProvince = {
							value:this.ProvinceList[0],
							index:0
						}
						this.chooseCity = {
							value:this.CityList[0],
							index:0
						}
					}
					
				}
			},
			async GetMyHometown(){
				let res = await this.$api.post('Place/GetMyHometown')
				if(res.code==0){
					if(res.data){
						
						
						this.chooseProvince.value = res.data.Province
						this.chooseCity.value = res.data.City 
						this.chooseFood.value = res.data.Area
						
						let ProvinceIndex = this.ProvinceList.findIndex(item=>item==res.data.Province)
						this.chooseProvince = {
							value:this.ProvinceList[ProvinceIndex],
							index:ProvinceIndex
						}
						
						this.CityList = cityUtil.CityList(this.chooseProvince.index)
						let CityIndex = this.CityList.findIndex(item=>item==res.data.City)
						this.chooseCity = {
							value:this.CityList[CityIndex],
							index:CityIndex
						}
						
						this.FoodList = cityUtil.AreaList(this.chooseProvince.index,this.chooseCity.index)
					}else{
						this.chooseProvince = {
							value:this.ProvinceList[0],
							index:0
						}
						this.chooseCity = {
							value:this.CityList[0],
							index:0
						}
					}
					
				}
			},
			checkAddressFun(){
				this.ProvinceList = cityUtil.ProvinceList()
				this.CityList = cityUtil.CityList(this.chooseProvince.index || 0)
				this.FoodList = cityUtil.AreaList(this.chooseProvince.index || 0,this.chooseCity.index || 0)
				
			},
			
			
			async checkProvince(item,index){
		
				
				this.chooseProvince = {
					value:item,
					index
				}
				this.checkAddressFun()
				
				this.chooseCity = {
					value:this.CityList[0],
					index:0
				}
				
				this.chooseFood = {
					value:'',
					index:null
				}
				// this.ProvinceIndex = index
				// this.CityIndex = 0
				this.checkAddressFun()
			},
			async checkCity(item,index){
				// this.FoodList = item.FoodList
			
			
				// this.CityIndex = index
				this.chooseCity = {
					value:item,
					index
				}
				
				this.chooseFood = {
					value:'',
					index:null
				}
				
				this.checkAddressFun()
			},
			checkFood(item,index){
				this.chooseFood = {
					value:item,
					index
				}
			},
			
			async SetHometown(){
				if(!this.chooseProvince.value){
					this.$pv.msg('请选择省份')
					return
				}
				if(!this.chooseCity.value){
					this.$pv.msg('请选择城市')
					return
				}
				if(!this.chooseFood.value){
					this.$pv.msg('请选择区域')
					return
				}
				if(this.mold==0){
					this.PlaceSetHometown()
				}
				if(this.mold==1){
					let params = {
						Province:this.chooseProvince.value,
						City:this.chooseCity.value,
						Area:this.chooseFood.value
					}
					// this.$pv.msg('设置成功')
					uni.$emit('updateAddress',params)
					setTimeout(()=>{
						uni.navigateBack()
					},100)
				}
			},
			
			async PlaceSetHometown(){
				let res = await this.$api.post('Place/SetHometown',{
					Province:this.chooseProvince.value,
					City:this.chooseCity.value,
					Area:this.chooseFood.value
				})
				
				if(res.code==0){
					this.$pv.msg('设置成功')
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				}else{
					this.$pv.msg(res.message)
				}
			}
			
		}
	}
</script>

<style lang="scss">
page {
    background-color: #FFF5E9;
}
.navBox {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;

	.nav_main {
			padding: 0 14rpx;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 36rpx;
			color: #fff;

			.nav_tit {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
			}
	}
}

.food_body{
	.province{
		padding: 24rpx;
		display: flex;
		align-items: center;
		height: 110rpx;
		overflow-x: scroll;
		.province_cell{
			min-width: max-content;
			padding: 12rpx 32rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			margin-right: 16rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.province_active{
			background-color: #5d8bf8;
			color: #fff;
		}
	}
	.food_main{
		display: flex;
		// height: calc(100vh - 110rpx - 120rpx);
		.county{
			width: 25%;
			height: 100%;
			padding-bottom: 60rpx;
			overflow-y: scroll;
			.county_cell{
				// box-sizing: border-box;
				padding: 24rpx 16rpx;
				text-align: center;
				font-size: 28rpx;
				color: #333333;
				position: relative;
				.count_box{
					position: absolute;
					top: 4rpx;
					right: 4rpx;
					padding: 4rpx;
					min-width: 28rpx;
					min-height: 28rpx;
					background-color: #5d8bf8;
					border-radius: 50%;
					font-size: 20rpx;
					color: #FFFFFF;
					box-sizing: content-box;
				}
			}
			.county_active{
				background-color: #ffffff;
				color: #333333;
			}
		}
		.food_entry{
			width: 75%;
			height: 100%;
			overflow-y: scroll;
			padding: 24rpx;
			padding-bottom: 60rpx;
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
			background-color: #ffffff;
			// box-sizing: border-box;
			.entry_cell{
				
				background: #fff5e9;
				border-radius: 18rpx;
				font-size: 28rpx;
				color: #333333;
				height: fit-content;
				padding: 12rpx 32rpx;
				margin: 0 24rpx 24rpx 0;
				position: relative;
				.entry_popup{
					position: absolute;
					right: 0;
					top: -16rpx;
					width: fit-content;
					border-radius: 24rpx 24rpx 24rpx 0rpx;
					padding: 2rpx 8rpx;
					background-color: #34ac51;
					font-size: 20rpx;
					color: #FFFFFF;
				}
				.warn_popup{
					background-color: #ff7f14;
				}
				.error_popup{
					background-color: #5d8bf8;
				}
			}
			.entry_active{
				background-color: #5d8bf8;
				color: #fff;
			}
			.tips{
				width: 100%;
				margin: 56rpx auto;
				margin-top: 32rpx;
				.tips_text{
					text-align: center;
					font-size: 24rpx;
					color: #B58D83;
					text{
						color: #5d8bf8;
					}
				}
			}
			.me_tit{
				width: 100%;
				margin-bottom: 24rpx;
				font-size: 28rpx;
				color: #333333;
			}
			
			.food_submit{
				position: fixed;
				bottom: 60rpx;
				left: 41%;
				
				width: 312rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				background: linear-gradient( 98deg, #FF7114 0%, #FF3B02 100%);
				box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(195,100,28,0.44);
				border-radius: 44rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}
}

.add_popup{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	.add_box{
		width: 80%;
		box-sizing: border-box;
		padding: 40rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		transition: all 0.2s ease-in;
		.add_tit{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			margin-bottom: 48rpx;
		}
		input{
			padding: 24rpx;
			background: #F5F5F5;
			border-radius: 8rpx;
			font-size: 28rpx;
		}
		.input_tips{
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #5d8bf8;
		}
		.add_btnbox{
			margin-top: 64rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn_add{
				width: 46%;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				background: #F5F5F5;
				border-radius: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
			.btn_sure{
				color: #fff;
				background: linear-gradient( 98deg, #FF7114 0%, #FF3B02 100%);
				box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(195,100,28,0.44);
			}
		}
	}
}
</style>
